<template>
  <div
    ref="chart"
    style="width:100%;height:100%"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)">
  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'line-chart',
  data () {
    return {
      myChart: null,
      loading: false
    }
  },
  props: {
    option: {
      type: [Object, Array]
    }
  },
  updated () {
    this.drawLine()
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const _this = this
      _this.myChart = echarts.init(_this.$refs.chart)
      _this.myChart.setOption(_this.option)
      window.addEventListener('resize', function () {
        _this.myChart.resize()
      })
    },
    hideLoading () {
      this.loading = false
    },
    showLoading () {
      this.loading = true
    }
  },
  watch: {
    option: {
      handler (newVal, oldVal) {
        this.drawLine()
      },
      deep: true
    },
    '$store.state.app.sidebar.opened': {
      handler (newVal, oldVal) {
        setTimeout(() => {
          this.myChart.resize()
        }, 200)
      }
    }
  },
  beforeDestroy () {
    if (this.myChart) {
      this.myChart.clear()
    }
  }
}
</script>

<style></style>
